<template>
	<!-- pages/workbench/materialManagement/materialExit/index -->
	<!-- 物资退场 -->
	<view>
		<u-loading-page bg-color="#fff" :loading="pageLoading" textSize="8"></u-loading-page>
		<view class="container-box" v-if="!pageLoading">
			<view class="pl-30">
				<sub-title>基本信息</sub-title>
			</view>
			<view class="pl-30 pr-30">
				<u--form labelPosition="left" :model="formData" class="pl-30 pr-30" :labelStyle="{fontSize: '28rpx'}">
					<u-form-item v-for="(item, i) in mapData" :key="i" :label="item.name" :borderBottom="true"
						:labelWidth="95">
						<u--input :value="formData[item.label]" border="none" inputAlign="right" readonly>
						</u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="pl-30 pr-30" style="min-height: 88rpx;" v-for="item,index in fileMap">
				<view v-if="index==1" style="border-top: 1px solid #dee2eb;"></view>
				<view class="pt-30 fs-28">附件</view>
				<view class="pb-20 fs-28">
					<file-upload v-if="hasLoad" :showUploadIcon="false" :showsDelete="false" v-model="fileMap[index]" />
				</view>
			</view>

			<view class="space" />
			<view class="pl-30 pt-30">
				<sub-title>清单明细</sub-title>
			</view>
			<view class="ml-30 mr-30 mb-30 mt-30 collapse-box">
				<u-collapse accordion :border="false" value="0">
					<u-collapse-item :name="i" title="物资名称" v-for="(item, i) in listData" :key="i" class="mb-20">
						<text slot="value" class="u-page__item__title__slot-title">{{item.materialNameDictLabel}}</text>
						<u--form labelPosition="left" labelWidth="160" :labelStyle="{fontSize: '28rpx'}">
							<u-form-item v-for="(it, ind) in column" :label="it.label"
								:borderBottom="ind==column.length-1?false:true" :labelWidth="it.label!='备注'?'160':'80'"
								:key="ind">
								<u--input v-if="it.label!='备注'" :value="item[it.key]" border="none" inputAlign="right" readonly>
								</u--input>
								<u--textarea v-else confirmType="done" @linechange="lineChange2" :autoHeight="true"
									:class="{projectclass: true,oneLine: lineCount2==1}" v-model="item[it.key]" border="none">
								</u--textarea>
							</u-form-item>
						</u--form>
					</u-collapse-item>
				</u-collapse>
			</view>

			<!-- 审批 -->
			<view class="space" v-if="fromTab==0" />
			<view class="pl-30 pt-30">
				<sub-title v-if="fromTab==0">审批</sub-title>
			</view>
			<u--form v-if="fromTab==0" :model="approvalForm" ref="approvalForm" :rules="rules" class="approval-form">
				<view class="pl-30 pt-30 pr-30 pb-30">
					<view class="pb-30 fs-28">审批结果</view>
					<view class="pb-30" style="border-bottom: 1px solid #dee2eb;">
						<u-radio-group v-model="approvalForm.type" @change="groupChange" class="group-text" size="24">
							<u-radio shape="circle" label="通过" name="1" />
							<u-radio :customStyle="{marginLeft: '36rpx',fontSize: '20rpx'}" shape="circle" label="退回" name="2"
								v-if="stepActive !== 1" />
							<u-radio :customStyle="{marginLeft: '36rpx'}" shape="circle" label="驳回" name="3" />
						</u-radio-group>
					</view>
				</view>
				<view class="pl-30 pr-30 pb-30" v-if="approvalForm.type==2">
					<view class="pb-30 fs-28">退回节点</view>
					<view class="pb-30" style="border-bottom: 1px solid #dee2eb;">
						<u--input placeholderStyle="fontSize: 28rpx" fontSize="28rpx" readonly
							@click.native="nodeInputHandler" placeholder="请选择退回节点" border="surround"
							v-model="approvalForm.returnNodeName">
						</u--input>
					</view>
				</view>
				<view class="pl-30 pr-30 pb-10">
					<view class="pb-30 fs-28">审批意见</view>
					<u--textarea confirmType="done" v-model="approvalForm.comment" maxlength="255" :count="true"
						placeholder="请输入审批意见"></u--textarea>
				</view>
			</u--form>
			<u-picker :show="showPicker" :closeOnClickOverlay="true" :columns="returnsList" @confirm="confirmPicker"
				@close="closePicker" @cancel="closePicker" keyName="name"></u-picker>
			<!-- 审批记录 -->
			<view class="space" />
			<approval-records class="ml-30 mr-30 pt-30" :flowList="flowList" />
			<!-- 提交审批 -->
			<view class="fix-btn" id="fixB" v-if="fromTab==0">
				<u-button type="primary" size="small" text="提交" color="#2289FF" class="btnB fs-28" @click="submitForm"
					:loading="loading"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import SubTitle from '@/pagesIndex/component/SubTitle.vue'
	import InfoCard from '@/pagesIndex/component/InfoCard.vue'
	import FileUpload from '@/components/fileUpload.vue'
	import NoData from "@/components/noData/index.vue"
	import ApprovalRecords from '@/pagesIndex/contractManagement/approvelRecords.vue'
	import repeated from '../mixins/repeated.js'
	export default {
		mixins: [repeated],
		components: {
			SubTitle,
			InfoCard,
			NoData,
			ApprovalRecords,
			FileUpload
		},
		data() {
			return {
				pageLoading: true,
				hasLoad: false,
				fileMap: [], //基本信息附件
				column: [{
						label: '退场数量',
						key: 'backQuantity'
					},
					{
						label: '含税单价',
						key: 'singleHasTax'
					}, {
						label: '含税合计',
						key: 'productTotalHasTax'
					},
					{
						label: '退场日期',
						key: 'backTime',
						slotName: 'remark'
					},
				],
				mapData: [{
						name: '业务单号',
						label: 'reviewCode'
					},
					{
						name: '物资退场时间',
						label: 'materialBackTime'
					},
					{
						name: '物资类型',
						label: 'materialTypeDictLabel'
					},
					{
						name: '分供商',
						label: 'subsupplierName'
					},
					{
						name: '含税合计',
						label: 'totalHasTax'
					},
					{
						name: '备注',
						label: 'remark'
					},
				],
				//获取节点信息
				stepActive: 1
			}
		},
		async onLoad({
			id,
			fromTab,
			taskId
		}) {
			this.fromTab = fromTab
			this.detailId = id
			this.approvalForm.taskId = taskId
			await this.getInfoById(this.detailId)
			// await this.getInfoById(117)
			// this.setTeamInfo()
			await this.getApprovalRecords()
			if (this.fromTab == 0) {
				this.getReturnList()
			}
		},
		methods: {
			setTeamInfo() {
				this.mapData = new Map();
				this.mapData.set('业务单号', 'reviewCode')
				this.mapData.set('物资退场时间', 'materialBackTime')
				this.mapData.set('物资类型', 'materialTypeDictLabel')
				this.mapData.set('分供商', 'subsupplierName')
				this.mapData.set('含税合计', 'totalHasTax')
				this.mapData.set('备注', 'remark')
			},
			// 获取节点信息
			getApprovalNode(procInsId) {
				this.$definition.getApprovalNode(procInsId).then((res) => {
					if (res.code === 200) {
						this.stepActive = res.data.active
					}
				});
			},
			getInfoById(id) {
				this.hasLoad = false
				return this.$api.queryExitDetailById(id).then(res => {
					this.fileMap = [[]]
					// 附件
					this.fileMap[0] = res.data.fileList
					
					res.data.productList.forEach(it => {
						it.backTime = this.$parseTime(it.backTime, '{y}-{m}-{d}')
					})
					//清单明细
					this.listData = res.data.productList
					delete res.data.productList
					//基本信息
					this.formData = res.data
					//获取节点信息
					this.getApprovalNode(this.formData.procInsId)
					this.hasLoad = true
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import '../mixins/style.scss';
</style>